import { Button, message, Popconfirm, Input, Select } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { BetaSchemaForm, ProFormText } from '@ant-design/pro-form';
import _ from 'lodash';
import request from '@/utils/request';
import apiPath from '@/utils/apiPath.js';

// BetaSchemaForm 在pro-form@1.21发布：https://github.com/ant-design/pro-components/pull/2040

const valueEnum = {
  all: { 
    text: '全部', 
    status: 'Default' 
  },
  open: {
    text: '未解决',
    status: 'Error',
  },
  closed: {
    text: '已解决',
    status: 'Success',
    disabled: true,
  },
  processing: {
    text: '解决中',
    status: 'Processing',
  },
};

const PageContent = () => {
  // 此配置可以从服务端下发
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
      width: 'm',
    },
    {
      title: '状态',
      dataIndex: 'state',
      valueType: 'select',
      valueEnum,
      width: 'm',
    },
    {
      title: '标签',
      dataIndex: 'labels',
      width: 'm',
    },
    {
      title: '创建时间',
      key: 'showTime',
      dataIndex: 'createName',
      valueType: 'date',
    },
    {
      title: '分组',
      valueType: 'group',
      columns: [
        {
          title: '状态',
          dataIndex: 'groupState',
          valueType: 'select',
          width: 'xs',
          valueEnum,
        },
        {
          title: '标题',
          width: 'md',
          dataIndex: 'groupTitle',
          formItemProps: {
            rules: [
              {
                required: true,
                message: '此项为必填项',
              },
            ],
          },
        },
        {
          title: '创建时间',
          dataIndex: 'groupCreatedAt',
          valueType: 'dateRange',
        }
      ],
    },
    {
      title: '列表',
      valueType: 'formList',
      dataIndex: 'list',
      initialValue: [{ state: 'all', title: '标题' }],
      columns: [
        {
          valueType: 'group',
          columns: [
            {
              title: '状态',
              dataIndex: 'state',
              valueType: 'select',
              width: 'xs',
              valueEnum,
            },
            {
              title: '标题',
              dataIndex: 'title',
              formItemProps: {
                rules: [
                  {
                    required: true,
                    message: '此项为必填项',
                  },
                ],
              },
              width: 'm',
            },
          ],
        },
      ],
    },
    {
      title: 'FormSet',
      valueType: 'formSet',
      dataIndex: 'formSet',
      columns: [
        {
          title: '状态',
          dataIndex: 'groupState',
          valueType: 'select',
          width: 'xs',
          valueEnum,
        },
        {
          title: '标题',
          dataIndex: 'groupTitle',
          tip: '标题过长会自动收缩',
          formItemProps: {
            rules: [
              {
                required: true,
                message: '此项为必填项',
              },
            ],
          },
          width: 'm',
        },
      ],
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      valueType: 'dateRange',
      // transform: (value) => {
      //   return {
      //     startTime: value[0],
      //     endTime: value[1],
      //   };
      // },
    },
  ];

  // 可添加特殊字段
  columns.push({
    title: '特殊字段',
    dataIndex: 'other_field',
    valueType: 'text',
    search: true,
    renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
      return (
        <Input placeholder="请输入特殊字段"/> 
      );
    },
  })

  return (
    <PageContainer>
      <BetaSchemaForm
        layoutType="ProForm"
        onFinish={async (values) => {
          // 此处为表单输入后的值
          console.log(values);
          // 需要把columns也一并提交，作为一个副本（避免以后改了配置后就与值对不上），只要渲染逻辑固定，columns与表单提交值就能一一对应。
        }}
        columns={columns}
      >
      </BetaSchemaForm>
      
    </PageContainer>
  );
};

export default PageContent;
